<!--
 * @Author: 王灿
 * @Date: 2019-11-16 21:43:49
 * @LastEditTime : 2020-01-12 13:30:38
 * @Description: 上传组件
 * @FilePath: \scarlet-sparrow-admin\src\views\components\jq-upload\index.vue
 -->
<template>
  <div class="jq-upload">
    <div class="jq-upload__title">
      <div class="jq-upload__title-box">
        <span>附件</span>
        <span>只能上传MP4格式的视频且不能超过10M</span>
      </div>
      <p class="fileText">{{ upData.label }} :</p>
      <div class="jq-upload__title-video">
        <div v-if="imageSrc">
          <video :src="imageSrc" class="avatar" />
          <div>
            <i class="el-icon-zoom-in" @click="handlePictureCardPreview"></i>
            <i class="el-icon-delete" @click="handleRemove"></i>
          </div>
        </div>
        <div>
          <input type="file" :accept="upData.accept" @change="onChangeFile"/>
          <i class="el-icon-plus"></i>
        </div>
      </div>
    </div>

    <!-- 查看视频 -->
    <el-dialog :title="upData.label" class="check-img__dialog" :visible.sync="isShow" :close-on-click-modal="false" width="500px" append-to-body>
      <video :src="imageSrc" alt="" controls="controls"/>
    </el-dialog>
  </div>
</template>

<script>
import { getUploadKey, getDownUrl } from '@/api/commodity.js'
import { Message } from 'element-ui'
export default {
  name: 'UploadVideo',
  props: {
    // 上传
    upData: {
      type: Object,
      default: () => {
        return {
          // 名称
          label: {
            type: String,
            default: ''
          },
          // 允许上传数量
          limit: {
            type: Number,
            default: 1
          },
          // 区分多组件上传赋值
          type: {
            type: Number,
            default: 1
          }
        }
      }
    },
    // 图片
    fileList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      file: '',
      fileName: '',
      isShow: false,
      imageSrc: '',
      isVideoShow: false
    }
  },
  watch: {
    // 监听
    fileList() {
      this.imageSrc = this.fileList.length === 0 ? '' : this.fileList[0].url
    }
  },
  created() {
    this.imageSrc = this.fileList.length === 0 ? '' : this.fileList[0].url
  },
  methods: {
    // 重写上传
    onChangeFile(event) {
      const self = this
      self.file = event.target.files[0]
      // 获取上传key
      getUploadKey({
        type: 1,
        fileName: self.file.name
      }).then(res => {
        // 上传腾讯云
        self.onUploadCos(res.data.fileName, res.data.uploadKey, self.file, self)
      })
    },
    // 上传腾讯云
    onUploadCos(fileName, uploadKey, file, self) {
      let form = new FormData()
      form.append('key', fileName)
      form.append('file', file)
      let oReqCos = new XMLHttpRequest()
      oReqCos.open('POST', uploadKey)
      oReqCos.onload = function(oEvent) {
        if (oReqCos.status === 204) {
          self.fileName = fileName;
          // 下载图片
          getDownUrl({
            fileName: fileName
          }).then(response => {
            self.imageSrc = response.data.url.split('?')[0]
            Message({
              message: '上传成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                self.$emit('onChangeImageKey', fileName, self.upData.type, false)
              }
            })
          })
        } else {
          self.fileName = '';
          self.$emit('onChangeImageKey', '', self.upData.type, false)
        }
      }
      oReqCos.send(form)
    },
    // 删除图片
    handleRemove() {
      this.imageSrc = ''
      this.$emit('onChangeImageKey', '', this.upData.type, true)
    },
    // 查看图片
    handlePictureCardPreview() {
      this.isShow = true
    }
  }
}
</script>

<style lang="scss">
.jq-upload {
  width: 100%;
  padding-top: 12px;
  .jq-upload__title {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e4e4e4;
    padding: 10px 20px;
    position: relative;
    .jq-upload__title-box {
      height: 25px;
      background-color: #fff;
      position: absolute;
      top: -12px;
      left: 10px;
      span:first-child {
        display: inline-block;
        min-width: 80px;
        padding: 0 10px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        background-color: #eaebe5;
        border-radius: 13px;
        font-size: 12px;
        font-weight: 700;
        color: #606842;
        margin-right: 15px;
      }
      span:nth-child(2) {
        font-size: 12px;
        color: #999;
        margin-right: 10px;
      }
    }
    .jq-upload__title-video {
      height: 100px !important;
      @include row;
      & > div {
        width: 100px;
        height: 100px;
        position: relative;
        &:first-child {
          margin-right: 15px;
          & > video {
            width: 100px;
            height: 100px;
          }
          & > div {
            position: absolute;
            width: 100px;
            height: 100px;
            @include row;
            justify-content: center;
            align-items: center;
            top: 0;
            left: 0;
            background-color: rgba(0,0,0,.5);
            opacity: 1;
            i {
              width: 30px;
              @include row;
              justify-content: center;
              color: #fff;
              cursor: pointer;
            }
          }
        }
        &:last-child {
          @include row;
          input {
            width: 100px;
            height: 100px;
            opacity: 0;
            padding: 0;
            position: relative;
            z-index: 1000;
          }
          i {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 100;
            font-size: 30px;
            @include row;
            justify-content: center;
            align-items: center;
            border: 1px dashed #c0ccda;
            border-radius: 6px;
            &:hover {
              border-color: #409EFF;
            }
            &:focus {
              border-color: #409EFF;
            }
          }
        }
      }
    }
  }
  .el-icon-upload-success {
    &.el-icon-check {
      position: absolute;
      right: 14px;
    }
  }
  video {
    width: 100px;
    height: 100px;
  }
}
</style>